<template>
  <!-- 
    父子组件 生命周期流程 

    初始化阶段和挂载阶段:
      父beforeCreate -> 父created -> 父beforeMount -> 
      子beforeCreate ->  子created -> 子beforeMount-> 
      子mounted -> 父mounted 

    更新阶段: 
    如果父组件更新不影响子组件的任何数据,则子组件不会重新渲染,不会走更新流程  
    若影响了子组件的数据 那么执行顺序是
    父beforeUpdate -> 子beforeUpdate -> 子updated -> 父updated

    销毁阶段: 
    父beforeDestroy -> 子beforeDestroy -> 子Destoryed -> 父Destroyed
   -->
  <div>
    <span>{{ msg }} 打印的数据 ****</span>
    <ul>
      <li v-for="(val,ind) in arr" :key="ind">{{val}} </li>
    </ul>
    <button @click="arr.push(1)">添加1</button>

    <hr>

    <Life v-if="isShow" :list="arr" @addFn=fn />

    <hr>
    <button @click="isShow = false">销毁子组件</button>

  </div>
</template>

<script>
import Life from '@/components/Life'
export default {
  data() {
    return {
      msg: '父组件',
      arr:['A','B','C'],
      isShow:true
    }
  },
  methods: {
    fn(n){
      this.arr.push(3)
    }
  },
  components: {
    Life
  },
  beforeCreate() {
    console.log('beforeCreate******执行')
    console.log(this.msg)
  },
  created() {
    console.log('created******执行了')
    console.log(this.msg)
  },
  beforeMount() {
    console.log('beforeMount******执行')
    console.log(document.querySelector('p'))
  },
  mounted() {
    console.log('mounted******执行')
    console.log(document.querySelector('p'))
  },
  beforeUpdate() {
    console.log('beforeUpdate******执行')
  },
  updated() {
    console.log('Updated****** 执行')
  },
  beforeDestroy() {
    console.log('beforeDestroy******-执行')
    clearInterval(this.timer)
  },
  destroyed() {
    console.log('destroyed******执行')
  }
  
}
</script>

<style>
</style>